import React, { useEffect, useState } from 'react';
import Home from './child/home';
import Parameter from './child/parameter';
import Issue from './child/issue';
import { Switch, Route, Redirect, type RouteComponentProps } from 'react-router-dom'
import { MenuFoldOutlined, MenuUnfoldOutlined, ShoppingOutlined, UserOutlined, ShopOutlined, SketchOutlined } from '@ant-design/icons';
import { Button, Layout, Menu, Space, theme } from 'antd';
import { useAppDispatch } from '../store/getstateTs'
import * as asyncfn from '../store/slice'
const { Header, Sider, Content } = Layout;

const Admin: React.FC<RouteComponentProps> = (props) => {
    let dispatch = useAppDispatch()
    useEffect(() => {
        dispatch(asyncfn.async_getlist())
    }, [])

    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    return (
        <Layout style={{ height: '100vh' }}>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className="demo-logo-vertical" />
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultOpenKeys={['/admin', props.location.pathname]}
                    defaultSelectedKeys={[props.location.pathname]}
                    items={[
                        {
                            key: '/admin/home',
                            icon: <UserOutlined />,
                            label: '首页',
                        },
                        {
                            key: '/admin',
                            icon: <ShopOutlined />,
                            label: '电子券管理',
                            children: [
                                {
                                    key: '/admin/parameter',
                                    icon: <ShoppingOutlined />,
                                    label: '优惠券制作',
                                },
                                {
                                    key: '/admin/issue',
                                    icon: <ShoppingOutlined />,
                                    label: '已发布优惠券',
                                }
                            ]
                        }
                    ]}
                    onSelect={(obj) => {
                        props.history.push(obj.key)
                    }}
                />
            </Sider>
            <Layout>
                <Header style={{ padding: 0, background: colorBgContainer }}>
                    <Button
                        type="text"
                        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                        onClick={() => setCollapsed(!collapsed)}
                        style={{
                            fontSize: '16px',
                            width: 64,
                            height: 64,
                        }}
                    />
                    <div>
                        <Space style={{ position: 'absolute', top: '0', right: '20px' }}>
                            <span>用户名:{localStorage.getItem('token')}</span>
                            <Button onClick={() => {
                                localStorage.removeItem('token')
                                props.history.push('/login')
                            }} color='danger' variant="outlined">退出登录</Button>
                        </Space>
                    </div>
                </Header>
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                    }}
                >
                    <Switch>
                        <Route path='/admin/home' component={Home} />
                        <Route path='/admin/parameter' component={Parameter} />
                        <Route path='/admin/issue' component={Issue} />
                        <Redirect from='/admin' exact to='/admin/home' />
                    </Switch>
                </Content>
            </Layout>
        </Layout>
    );
};

export default Admin;